<!-- 公共文件 start -->
@extends('admin.public.base')
<!-- 公共文件 end -->
<style>
    .image-upload {
        display: inline-block;
        width: 230px !important;
        height: 140px;
        cursor: pointer;
        border: 1px dotted #ccc;
        background-size: 100% 100%;
        background-image: url(/static/image/default.png);
    }
    .image-upload button,.identity-z button,.identity-f button {
        width: 100%;
        position: relative;
        top: 50px;
        opacity: 0;
        cursor: pointer;
    }
    .x-admin-sm .image-upload .layui-btn:hover{
        opacity: 0;
    }
</style>
@section('content')
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="pid" class="layui-form-label">上级分类</label>
                <div class="layui-input-inline">
                    <select id="pid" name="pid" class="valid">
                        <option value="0">顶级分类</option>
                        @foreach($list as $item)
                            @if($info['pid'] == $item['id'])
                                <option value="{{$item['id']}}" selected>{{$item['cate_name']}}</option>
                            @else
                                <option value="{{$item['id']}}">{{$item['cate_name']}}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="cate_name" class="layui-form-label">
                    <span class="x-red">*</span>分类名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="cate_name" name="cate_name" required="" lay-verify="required" autocomplete="off" class="layui-input" value="{{$info['cate_name']}}"></div>
            </div>
            <div class="layui-form-item">
                <label for="cate_img" class="layui-form-label">
                    <span class="x-red">*</span>分类图片</label>
                <div class="image-upload identity-z" style="background-image: url({{$info['cate_img']}})">
                    <button type="button" class="layui-btn" id="cate_img">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <input type="hidden" name="cate_img" value="{{$info['cate_img']}}"></input>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label for="remark" class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注内容" id="remark" name="remark" class="layui-textarea" value="{{$info['remark']}}">{{$info['remark']}}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <input type="hidden" name="id" value="{{$info['id']}}"></input>
                <button class="layui-btn" lay-filter="add" lay-submit="">增加</button></div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            // 上传分类图片
            layui.use('upload', function(){
                var upload = layui.upload;
                var uploadInst = upload.render({
                    elem: '#cate_img',  // 绑定元素
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    url: '/admin/index/imageUpload', // 上传接口
                    done: function(res){
                        //上传完毕回调
                        $(".image-upload").css('background-image',"url(" + res.data.image + ")");
                        $("input[name='cate_img']").val(res.data.image);
                    },
                    error: function(){
                        //请求异常回调
                    }
                });
            });

            //监听提交
            form.on('submit(add)',
                function(data) {
                    if (data.field.cate_img == '') {
                        layer.msg('请上传分类图片',{icon:7,time:2000});
                        return false;
                    }
                    $.ajax({
                        type: 'POST',
                        url: '/admin/goods/categoryEdit',
                        data: {
                            id: data.field.id,
                            pid: data.field.pid,
                            cate_name: data.field.cate_name,
                            cate_img: data.field.cate_img,
                            remark: data.field.remark
                        },
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                layer.alert("编辑成功", {
                                        icon: 6,
                                        closeBtn: false
                                    },
                                    function() {
                                        //关闭当前frame
                                        xadmin.close();
                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            } else {
                                layer.alert(data.msg)
                            }
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!')
                        }
                    });
                    return false;
                });
            });
</script>

@endsection
